import Taro, { Component } from '@tarojs/taro'
import { ScrollView, View } from '@tarojs/components'
import classNames from 'classnames'
import './index.scss'

interface IProps {
  list: Array<Object>
  current: number
  onClick: Function
  className: string
}

const prefixCls = 'tab-search'
export default class TabSearch extends Component<IProps, {}> {
  state: any
  props: any

  static options = {
    addGlobalClass: true
  }

  constructor(props) {
    super(...arguments)
    this.state = {
      tabKey: props.current || 0,
      checked: [ '', '' ],
      optList: [],
      showOpt: false
    }
  }

  //  选择分类
  onSelectCty(item, key) {
    const { ctyKey, showOpt } = this.state
    if (ctyKey === key) {
      this.setState({
        showOpt: !showOpt
      })
    } else {
      this.setState({
        ctyKey: key,
        optList: item.list,
        showOpt: true
      })
    }
  }

  //  选择
  onSelectOpt(item) {
    const { onSelect } = this.props
    const { ctyKey, checked } = this.state
    checked[ctyKey] = item.id
    this.setState({
      checked,
      showOpt: false
    })
    onSelect && onSelect(checked)
  }

  //  关闭选择
  onCloseOpt() {
    this.setState({
      showOpt: false
    })
  }

  render() {
    const { list=[] } = this.props
    const { checked, ctyKey, optList, showOpt } = this.state
    const bool = showOpt ? 'enter' : 'leave'
    // @ts-ignore
    return (<View className={classNames(prefixCls, { [`${prefixCls}--show`]: showOpt })} catchtouchmove>
      <View className={`${prefixCls}-overlay xf-overlay xf-fade-${bool}`} onClick={this.onCloseOpt.bind(this)}/>
      <View className={`${prefixCls}-cty thin-border__b`}>
        {
          list.map((item, key) => {
            const index = item.list.findIndex(({ id }) => (id === checked[key]))
            const check = item.list[index]
            return (
              <View key={key} className={`${prefixCls}-cty-item`} onClick={this.onSelectCty.bind(this, item, key)}>
                <View className={`${prefixCls}-cty-name`}>{check.name}</View>
                {showOpt && ctyKey === key ? (
                  <View className={`${prefixCls}-cty-icon bnn-icon`}>&#xe79c;</View>
                ): (
                  <View className={`${prefixCls}-cty-icon bnn-icon`}>&#xe79b;</View>
                )}

              </View>
            )
          })
        }
      </View>

      <ScrollView scrollY className={classNames(`${prefixCls}-opt`, { [`${prefixCls}-opt--show`]: !showOpt })}>
        {
          optList.map((item, key) => {
            return (
              <View key={key} className={classNames(`${prefixCls}-opt-item`, { [`${prefixCls}-opt-active`]: checked[ctyKey] === item.id })} onClick={this.onSelectOpt.bind(this, item)}>
                <View className={`${prefixCls}-opt-name`}>{item.name}</View>
                {checked[ctyKey] === item.id && <View className={`${prefixCls}-opt-icon bnn-icon`}>&#xe645;</View>}
              </View>
            )
          })
        }
      </ScrollView>

      {/*<View className={`${prefixCls}-btn thin-border__t`}>*/}
      {/*  <Button className={`${prefixCls}-btn-item xf-btn xf-btn-round`}>重置</Button>*/}
      {/*  <Button className={`${prefixCls}-btn-item xf-btn xf-btn-round xf-btn-danger`}>确定</Button>*/}
      {/*</View>*/}
    </View>)
  }
}
